import Https from "@/utils/Https";
import { PageContainer, DragSortTable } from "@ant-design/pro-components";
import {
  Button,
  Card,
  Descriptions,
  Drawer,
  Form,
  Input,
  Popconfirm,
  Radio,
  Space,
  message,
  Image,
  Spin,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import { FC, useEffect, useRef, useState } from "react";
import { history, useParams } from "umi";
import { calcColumns3 } from "./configFile";
import UploadPreview from "@/components/UploadPreview/index"; //上传图片预览组件
import styles from "./styles.less";
import { DeleteOutlined } from "@ant-design/icons";
const PathDetails: FC<{}> = (props) => {
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [picGuideUrl, setPicGuideUrl] = useState("");
  const [dataSource, setDataSource] = useState([]);
  const actionRef = useRef();
  const [form] = Form.useForm();
  const [pathObj, setPathObj] = useState(null);
  const [status, setStatus] = useState(0);
  const params = useParams();
  const [type, setType] = useState("0");
  //删除路径指引
  const deleteItem = async (id) => {
    let res = await Https.post(
      "/venue/pathguide/deletePathGuide",
      { id },
      true
    );
    if (res.code == 200) {
      message.success("删除成功");
      getList();
    } else {
      message.error(res.msg);
    }
  };
  //获取路径详情
  const getDetails = async () => {
    let res = await Https.get(
      "/venue/path/pathDetail?id=" + params.id,
      {},
      true
    );
    if (res.code == 200) {
      setPathObj(res.data);
    } else {
      message.error(res.msg);
    }
  };
  //获取列表信息
  const getList = async () => {
    setLoading(true);
    let res = await Https.post(
      "/venue/pathguide/pathGuideList",
      { pathId: params.id },
      true
    );
    setLoading(false);
    if (res.code == 200) {
      setDataSource(res.data.records);
    } else {
      message.error(res.msg);
    }
  };
  //提交表单
  const submit = async () => {
    const formObj = await form.validateFields();
    let obj = {
      picGuideUrl: "",
      videoGuideUrl: "",
      ...formObj,
      pathId: params.id,
    };
    let url =
      status == 0
        ? "/venue/pathguide/addPathGuide"
        : "/venue/pathguide/updatePathGuide";
    let res = await Https.post(url, obj, true);
    if (res.code == 200) {
      message.success("操作成功");
      setOpen(false);
      getList();
    } else {
      message.error(res.msg);
    }
  };
  //操作列表
  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (id, record) => {
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              form.resetFields();
              setPicGuideUrl(record.picGuideUrl);
              setType(record.type);
              form.setFieldsValue(record);
              setOpen(true);
              setStatus(1);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除"
            onConfirm={() => deleteItem(record.id)}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      );
    },
  };
  //排序
  const handleDragSortEnd = async (
    beforIndex,
    afterIndex,
    newDataSource: any
  ) => {
    let objList = [];
    newDataSource.map((item, index) => {
      objList.push({ id: item.id, sort: index });
    });
    let res = await Https.post("/venue/pathguide/pathGuideSort", objList, true);
    if (res.code == 200) {
      message.success("操作成功");
      setDataSource(newDataSource);
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    getList();
    getDetails();
  }, []);
  return (
    <PageContainer
      onBack={() => {
        history.push("/stadium/path");
      }}
      title={"路径详情"}
    >
      {pathObj && (
        <Card title="路径指引信息">
          <Descriptions title="">
            <Descriptions.Item label="指引标题">
              {pathObj.pathName}
            </Descriptions.Item>
            <Descriptions.Item label="所属场馆">
              {pathObj.venueName}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {pathObj.createTime}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}
      <Card
        style={{ marginTop: "16px" }}
        title=""
        extra={
          <Space>
            <a
              onClick={() => {
                getList();
              }}
            >
              刷新
            </a>
            <a
              onClick={() => {
                form.resetFields();
                setPicGuideUrl("");
                form.setFieldsValue({ type: "0" });
                setType("0");
                setOpen(true);
                setStatus(0);
              }}
              style={{ marginLeft: "16px" }}
            >
              新增
            </a>
          </Space>
        }
      >
        <DragSortTable
          actionRef={actionRef}
          rowKey="id"
          scroll={{ y: 500 }}
          search={false}
          options={false}
          pagination={false}
          loading={loading}
          dragSortKey="sort"
          onDragSortEnd={handleDragSortEnd}
          dataSource={dataSource}
          columns={calcColumns3({ operate })}
        />
      </Card>
      <Drawer
        title={`${status == 0 ? "新增" : "编辑"}路径描述`}
        onClose={() => {
          setOpen(false);
        }}
        destroyOnClose={true}
        maskClosable={true}
        width="60%"
        open={open}
        extra={
          <Space>
            <Button
              size="large"
              onClick={() => {
                setOpen(false);
              }}
            >
              取消
            </Button>
            <Button
              onClick={() => {
                submit();
              }}
              size="large"
              type="primary"
            >
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item
            label="路径描述"
            name="description"
            rules={[{ required: true, message: "路径描述不能为空" }]}
          >
            <TextArea
              showCount
              maxLength={500}
              style={{ height: 150, resize: "none" }}
              placeholder="请输入路径描述"
            />
          </Form.Item>
          <Form.Item
            label="附件选项"
            name="type"
            rules={[{ required: true, message: "附件选项不能为空" }]}
          >
            <Radio.Group
              onChange={(e) => {
                setType(e.target.value);
              }}
            >
              <Radio value="0">无</Radio>
              <Radio value="1">图片</Radio>
              {/* <Radio value="2">视频网址</Radio> */}
            </Radio.Group>
          </Form.Item>
          {type == "2" && (
            <Form.Item label="视频网址" name="videoGuideUrl">
              <Input placeholder="请输入" />
            </Form.Item>
          )}
          {type == "1" && (
            <Form.Item label="图片描述" name="picGuideUrl">
              {picGuideUrl ? (
                <div className={styles.avatar_box}>
                  <Image width={160} height={90} src={picGuideUrl} />
                  <a
                    onClick={() => {
                      form.setFieldsValue({ picGuideUrl: "" });
                      setPicGuideUrl("");
                    }}
                  >
                    <DeleteOutlined
                      style={{ fontSize: "15px", color: "#ffffff" }}
                    />
                  </a>
                </div>
              ) : (
                <>
                  <UploadPreview
                    aspect={16 / 9}
                    onSuccess={(e) => {
                      form.setFieldsValue({ picGuideUrl: e });
                      setPicGuideUrl(e);
                    }}
                  />
                  <p>图片推荐尺寸 ：160×90px ；大小建议：2M以内；</p>
                </>
              )}
            </Form.Item>
          )}
        </Form>
      </Drawer>
    </PageContainer>
  );
};
export default PathDetails;
